CSS లాజికల్ ప్రాపర్టీస్ లెవెల్ 2 తో వెబ్ లేఅవుట్ భవిష్యత్తును అన్వేషించండి. ఈ గైడ్ కొత్త ప్రాపర్టీలు, ఉదాహరణలు, మరియు గ్లోబల్, రైటింగ్-మోడ్-అవేర్ వెబ్‌సైట్‌లను ఎలా నిర్మించాలో వివరిస్తుంది.
CSS లాజికల్ ప్రాపర్టీస్ లెవెల్ 2: మెరుగైన రైటింగ్ మోడ్ మద్దతుతో నిజమైన గ్లోబల్ వెబ్ నిర్మించడం
దశాబ్దాలుగా, వెబ్ డెవలపర్లు భౌతిక ప్రపంచంలో పాతుకుపోయిన పదజాలం ఉపయోగించి లేఅవుట్‌లను నిర్మించారు: top, bottom, left, మరియు right. మనం margin-left, padding-top, మరియు border-right సెట్ చేసాము. వెబ్ ప్రధానంగా ఎడమ నుండి కుడికి, పై నుండి కిందకి ఉన్న మాధ్యమంగా ఉన్నప్పుడు ఈ మానసిక నమూనా మనకు బాగా ఉపయోగపడింది. అయితే, వెబ్ గ్లోబల్. ఇది అన్ని భాషలు మరియు సంస్కృతుల కోసం ఒక వేదిక, వాటిలో చాలా వరకు ఈ సాధారణ దిశాత్మక ప్రవాహాన్ని అనుసరించవు.
అరబిక్ మరియు హీబ్రూ వంటి భాషలు కుడి నుండి ఎడమకు వ్రాయబడతాయి. సాంప్రదాయ జపనీస్ మరియు చైనీస్ నిలువుగా, పై నుండి కిందకు మరియు కుడి నుండి ఎడమకు వ్రాయవచ్చు. ఈ రైటింగ్ సిస్టమ్‌లపై భౌతిక, ఎడమ నుండి కుడికి CSS మోడల్‌ను బలవంతం చేయడం వల్ల లేఅవుట్‌లు విఫలమవుతాయి, వినియోగదారు అనుభవం నిరాశపరిచేదిగా ఉంటుంది మరియు కోడ్ ఓవర్‌రైడ్‌ల పర్వతం ఏర్పడుతుంది. ఇక్కడే CSS లాజికల్ ప్రాపర్టీస్ మరియు వాల్యూస్ వస్తాయి, ఇది భౌతిక దిశల నుండి ఫ్లో-రిలేటివ్, లాజికల్ దిశలకు ప్రాథమిక నమూనా మార్పును సూచిస్తుంది. లెవెల్ 1 పునాది వేయగా, CSS లాజికల్ ప్రాపర్టీస్ లెవెల్ 2 చిత్రాన్ని పూర్తి చేస్తుంది, నిజంగా సార్వత్రిక, రైటింగ్-మోడ్-అవేర్ యూజర్ ఇంటర్‌ఫేస్‌లను నిర్మించడానికి మనకు అవసరమైన సాధనాలను అందిస్తుంది.
ఈ సమగ్ర గైడ్ మిమ్మల్ని లెవెల్ 2 ద్వారా తీసుకువచ్చిన మెరుగుదలలపై లోతైన పరిశీలనకు తీసుకెళుతుంది. మనం ప్రధాన భావనల యొక్క పునశ్చరణతో ప్రారంభిస్తాము, ఆపై ఖాళీలను పూరించే కొత్త ప్రాపర్టీలు మరియు వాల్యూస్‌ను అన్వేషిస్తాము, మరియు చివరగా, ఏదైనా రైటింగ్ మోడ్‌కు సజావుగా అనుగుణంగా ఉండే ఒక కాంపోనెంట్‌ను నిర్మించడం ద్వారా వాటన్నింటినీ ఆచరణలో పెడతాము. CSS లేఅవుట్ గురించి మీరు ఆలోచించే విధానాన్ని శాశ్వతంగా మార్చడానికి సిద్ధంగా ఉండండి.
శీఘ్ర పునశ్చరణ: లాజికల్ ప్రాపర్టీస్ యొక్క ప్రధాన భావనలు (లెవెల్ 1)
లెవెల్ 2 లోని చేర్పులను మనం అభినందించడానికి ముందు, లెవెల్ 1 ద్వారా వేయబడిన పునాదిపై మనకు దృఢమైన అవగాహన ఉండాలి. మొత్తం సిస్టమ్ రెండు కీలక భావనలపై నిర్మించబడింది: రైటింగ్ మోడ్ మరియు దాని ఫలితంగా వచ్చే బ్లాక్ మరియు ఇన్‌లైన్ యాక్సిస్‌లు.
నాలుగు రైటింగ్ మోడ్‌లు
writing-mode CSS ప్రాపర్టీ టెక్స్ట్ ఏ దిశలో లేఅవుట్ చేయబడుతుందో నిర్ధారిస్తుంది. మనం తరచుగా డిఫాల్ట్‌ను తేలికగా తీసుకుంటాం, కానీ పేజీలో కంటెంట్ ఎలా ప్రవహిస్తుందో ప్రాథమికంగా మార్చే అనేక విలువలు ఉన్నాయి:
- horizontal-tb: ఇది చాలా పాశ్చాత్య భాషలకు డిఫాల్ట్. టెక్స్ట్ అడ్డంగా (ఇన్‌లైన్ యాక్సిస్) ఎడమ నుండి కుడికి (లేదా దిశ ఆధారంగా కుడి నుండి ఎడమకు) ప్రవహిస్తుంది, మరియు లైన్‌లు పై నుండి కిందకి (బ్లాక్ యాక్సిస్) పేర్చబడతాయి.
- vertical-rl: సాంప్రదాయ తూర్పు ఆసియా టైపోగ్రఫీ (ఉదా., జపనీస్, చైనీస్) కోసం ఉపయోగించబడుతుంది. టెక్స్ట్ నిలువుగా పై నుండి కిందకు (ఇన్‌లైన్ యాక్సిస్) ప్రవహిస్తుంది, మరియు లైన్‌లు కుడి నుండి ఎడమకు (బ్లాక్ యాక్సిస్) పేర్చబడతాయి.
- vertical-lr: పైదాని మాదిరిగానే ఉంటుంది, కానీ లైన్‌లు ఎడమ నుండి కుడికి (బ్లాక్ యాక్సిస్) పేర్చబడతాయి. తక్కువ సాధారణం, కానీ మంగోలియన్ స్క్రిప్ట్ వంటి కొన్ని సందర్భాలలో ఉపయోగించబడుతుంది.
- sidelong-rl / sidelong-lr: మీరు గ్లిఫ్‌లను వాటి పక్కన ఉంచాలనుకునే నిర్దిష్ట వినియోగ సందర్భాల కోసం ఇవి ఉన్నాయి. సాధారణ వెబ్ కంటెంట్‌లో ఇవి తక్కువ సాధారణం.
కీలక భావన: బ్లాక్ వర్సెస్ ఇన్‌లైన్ యాక్సిస్
ఇది గ్రహించడానికి అత్యంత ముఖ్యమైన భావన. ఒక లాజికల్ ప్రపంచంలో, మనం "నిలువు" మరియు "అడ్డం" గురించి ఆలోచించడం మానేసి, బ్లాక్ మరియు ఇన్‌లైన్ యాక్సిస్‌ల పరంగా ఆలోచించడం ప్రారంభిస్తాము. వాటి ఓరియంటేషన్ పూర్తిగా writing-mode పై ఆధారపడి ఉంటుంది.
- ఇన్‌లైన్ యాక్సిస్ అనేది ఒకే లైన్‌లో టెక్స్ట్ ప్రవహించే దిశ.
- బ్లాక్ యాక్సిస్ అనేది కొత్త లైన్‌లు పేర్చబడే దిశ.
ఇది ఎలా పనిచేస్తుందో చూద్దాం:
- ప్రామాణిక ఇంగ్లీషులో (writing-mode: horizontal-tb): ఇన్‌లైన్ యాక్సిస్ అడ్డంగా నడుస్తుంది, మరియు బ్లాక్ యాక్సిస్ నిలువుగా నడుస్తుంది.
- సాంప్రదాయ జపనీస్‌లో (writing-mode: vertical-rl): ఇన్‌లైన్ యాక్సిస్ నిలువుగా నడుస్తుంది, మరియు బ్లాక్ యాక్సిస్ అడ్డంగా నడుస్తుంది.
ఈ యాక్సిస్‌లు మారగలవు కాబట్టి, width మరియు height వంటి ప్రాపర్టీలు అస్పష్టంగా మారతాయి. width అనేది అడ్డంగా ఉండే యాక్సిస్ పొడవా లేక ఇన్‌లైన్ యాక్సిస్ పొడవా? లాజికల్ ప్రాపర్టీలు ఈ అస్పష్టతను పరిష్కరిస్తాయి. మనకు ఇప్పుడు ప్రతి యాక్సిస్‌కు start మరియు end ఉన్నాయి:
- block-start: ఇంగ్లీషులో "top", కానీ నిలువు జపనీస్‌లో "right".
- block-end: ఇంగ్లీషులో "bottom", కానీ నిలువు జపనీస్‌లో "left".
- inline-start: ఇంగ్లీషులో "left", కానీ నిలువు జపనీస్‌లో "top".
- inline-end: ఇంగ్లీషులో "right", కానీ నిలువు జపనీస్‌లో "bottom".
భౌతిక ప్రాపర్టీలను లాజికల్ ప్రాపర్టీలకు మ్యాపింగ్ చేయడం (లెవెల్ 1)
లెవెల్ 1 భౌతిక ప్రాపర్టీల నుండి లాజికల్ ప్రాపర్టీలకు సమగ్రమైన మ్యాపింగ్‌ల సమితిని పరిచయం చేసింది. ఇక్కడ కొన్ని కీలక ఉదాహరణలు ఉన్నాయి:
- width → inline-size
- height → block-size
- min-width → min-inline-size
- max-height → max-block-size
- margin-left → margin-inline-start
- margin-right → margin-inline-end
- margin-top → margin-block-start
- margin-bottom → margin-block-end
- padding-left → padding-inline-start
- padding-top → padding-block-start
- border-right → border-inline-end
- border-bottom → border-block-end
- left / right (పొజిషనింగ్ కోసం) → inset-inline-start / inset-inline-end
- top / bottom (పొజిషనింగ్ కోసం) → inset-block-start / inset-block-end
లెవెల్ 1 మనకు margin-inline (ప్రారంభం మరియు ముగింపు కోసం) మరియు padding-block (ప్రారంభం మరియు ముగింపు కోసం) వంటి ఉపయోగకరమైన షార్ట్‌హ్యాండ్‌లను కూడా ఇచ్చింది.
లెవెల్ 2కు స్వాగతం: కొత్తవి ఏమిటి మరియు అవి ఎందుకు ముఖ్యమైనవి
లెవెల్ 1 ఒక స్మారక ముందడుగు అయినప్పటికీ, అది కొన్ని గమనించదగ్గ ఖాళీలను వదిలివేసింది. float, clear, మరియు resize వంటి కొన్ని ప్రాథమిక CSS ప్రాపర్టీలకు లాజికల్ సమానమైనవి లేవు. అంతేకాకుండా, border-radius వంటి ప్రాపర్టీలను లాజికల్‌గా నియంత్రించడం సాధ్యం కాలేదు, దీనివల్ల డెవలపర్లు సూక్ష్మమైన స్టైలింగ్ కోసం భౌతిక ప్రాపర్టీలకు తిరిగి వెళ్ళవలసి వచ్చింది. దీని అర్థం మీరు లాజికల్ ప్రాపర్టీలతో 90% లేఅవుట్‌ను నిర్మించగలరు, కానీ వివిధ రైటింగ్ మోడ్‌ల కోసం ఇప్పటికీ భౌతిక ఓవర్‌రైడ్‌లు అవసరం, ఇది ఉద్దేశ్యాన్ని పాక్షికంగా ఓడిస్తుంది.
CSS లాజికల్ ప్రాపర్టీస్ లెవెల్ 2 ఈ లోపాలను నేరుగా పరిష్కరిస్తుంది. ఇది ఒక రాడికల్ కొత్త వ్యవస్థను పరిచయం చేయడం గురించి కాదు, కానీ లెవెల్ 1 లో ప్రారంభమైన దానిని పూర్తి చేయడం గురించి. ఇది రెండు ప్రాథమిక మార్గాల్లో దీనిని సాధిస్తుంది:
- పాత CSS ఫీచర్ల కోసం కొత్త లాజికల్ ప్రాపర్టీలు మరియు వాల్యూస్‌ను పరిచయం చేయడం, అవి సహజంగా భౌతికమైనవి (float వంటివి).
- సంక్లిష్టమైన షార్ట్‌హ్యాండ్‌ల కోసం లాజికల్ ప్రాపర్టీ మ్యాపింగ్‌లను జోడించడం, అవి ఇంతకుముందు విస్మరించబడ్డాయి (border-radius వంటివి).
లెవెల్ 2 తో, పూర్తిగా ఫ్లో-రిలేటివ్ స్టైలింగ్ సిస్టమ్ యొక్క దృష్టి దాదాపు పూర్తి అయింది, ఇది మనకు సంక్లిష్టమైన, అందమైన, మరియు దృఢమైన కాంపోనెంట్‌లను నిర్మించడానికి అనుమతిస్తుంది, అవి హ్యాక్స్ లేదా ఓవర్‌రైడ్‌లు లేకుండా ప్రతిచోటా, ప్రతిఒక్కరికీ పనిచేస్తాయి.
లోతైన పరిశీలన: లెవెల్ 2 లో కొత్త లాజికల్ వాల్యూస్ మరియు ప్రాపర్టీస్
లెవెల్ 2 మన డెవలపర్ టూల్‌కిట్‌కు తీసుకువచ్చే అత్యంత ప్రభావవంతమైన చేర్పులను అన్వేషిద్దాం. ఇవి ఖాళీలను పూరించి, నిజంగా సార్వత్రిక కాంపోనెంట్ డిజైన్‌ను సాధికారం చేసే సాధనాలు.
Float మరియు Clear: లాజికల్ విప్లవం
float ప్రాపర్టీ సంవత్సరాలుగా CSS లేఅవుట్‌కు మూలస్తంభంగా ఉంది, కానీ దాని విలువలు, left మరియు right, భౌతిక దిశ యొక్క నిర్వచనం. మీరు ఇంగ్లీషులో ఒక పేరాకు left వైపు ఒక చిత్రాన్ని ఫ్లోట్ చేస్తే, అది సరిగ్గా కనిపిస్తుంది. కానీ అరబిక్ కోసం డాక్యుమెంట్ దిశను కుడి నుండి ఎడమకు (RTL) మార్చినప్పుడు, చిత్రం ఇప్పుడు టెక్స్ట్ బ్లాక్ యొక్క "తప్పు" వైపు ఉంటుంది. అది కుడి వైపు ఉండాలి, అదే లైన్ ప్రారంభం.
లెవెల్ 2 float ప్రాపర్టీ కోసం రెండు కొత్త, లాజికల్ కీవర్డ్‌లను పరిచయం చేస్తుంది:
- float: inline-start; ఇది ఒక ఎలిమెంట్‌ను ఇన్‌లైన్ దిశ యొక్క ప్రారంభానికి ఫ్లోట్ చేస్తుంది. LTR భాషలలో, ఇది ఎడమ. RTL భాషలలో, ఇది కుడి. vertical-rl రైటింగ్ మోడ్‌లో, ఇది పైభాగం.
- float: inline-end; ఇది ఒక ఎలిమెంట్‌ను ఇన్‌లైన్ దిశ యొక్క ముగింపుకు ఫ్లోట్ చేస్తుంది. LTR లో, ఇది కుడి. RTL లో, ఇది ఎడమ. vertical-rl లో, ఇది దిగువ.
అదేవిధంగా, ఫ్లోట్ చేయబడిన ఎలిమెంట్‌ల చుట్టూ కంటెంట్ చుట్టబడటాన్ని నియంత్రించడానికి ఉపయోగించే clear ప్రాపర్టీకి దాని లాజికల్ సమానమైనవి లభిస్తాయి:
- clear: inline-start; ఇన్‌లైన్-ప్రారంభ వైపు ఫ్లోట్‌లను క్లియర్ చేస్తుంది.
- clear: inline-end; ఇన్‌లైన్-ముగింపు వైపు ఫ్లోట్‌లను క్లియర్ చేస్తుంది.
ఇది ఒక గేమ్-ఛేంజర్. మీరు ఇప్పుడు ఒక్క లైన్ అదనపు CSS లేకుండా ఏదైనా భాషా దిశకు స్వయంచాలకంగా అనుగుణంగా ఉండే క్లాసిక్ ఇమేజ్-విత్-టెక్స్ట్-వ్రాప్ లేఅవుట్‌లను సృష్టించవచ్చు.
లాజికల్ రీసైజ్‌తో మెరుగైన నియంత్రణ
సాధారణంగా textarea పై ఉపయోగించే resize ప్రాపర్టీ, వినియోగదారులు ఒక ఎలిమెంట్‌ను పునఃపరిమాణం చేయడానికి అనుమతిస్తుంది. దాని సాంప్రదాయ విలువలు horizontal, vertical, మరియు both. కానీ నిలువు రైటింగ్ మోడ్‌లో "horizontal" అంటే ఏమిటి? ఇది ఇప్పటికీ భౌతిక అడ్డంగా ఉండే యాక్సిస్ వెంట పునఃపరిమాణం చేయడం అని అర్థం, ఇది వినియోగదారు లేదా డిజైనర్ ఉద్దేశించినది కాకపోవచ్చు. వినియోగదారు బహుశా లైన్‌లను పొడవుగా లేదా చిన్నగా చేయడానికి దాని ఇన్‌లైన్ యాక్సిస్ వెంట ఎలిమెంట్‌ను పునఃపరిమాణం చేయాలనుకోవచ్చు.
లెవెల్ 2 resize కోసం లాజికల్ విలువలను పరిచయం చేస్తుంది:
- resize: inline; ఇన్‌లైన్ యాక్సిస్ వెంట పునఃపరిమాణం చేయడానికి అనుమతిస్తుంది.
- resize: block; బ్లాక్ యాక్సిస్ వెంట పునఃపరిమాణం చేయడానికి అనుమతిస్తుంది.
ఇంగ్లీషులో ఒక textarea పై resize: block; ఉపయోగించడం వల్ల వినియోగదారు దానిని పొడవుగా చేయవచ్చు. నిలువు రైటింగ్ మోడ్‌లో దీనిని ఉపయోగించడం వల్ల వినియోగదారు దానిని వెడల్పుగా చేయవచ్చు (అదే బ్లాక్ దిశ). ఇది కేవలం పనిచేస్తుంది.
`caption-side`: టేబుల్ క్యాప్షన్‌ల కోసం లాజికల్ పొజిషనింగ్
caption-side ప్రాపర్టీ టేబుల్ యొక్క caption యొక్క స్థానాన్ని నిర్ధారిస్తుంది. పాత విలువలు top మరియు bottom. మళ్ళీ, ఇవి భౌతికమైనవి. ఒక డిజైనర్ ఉద్దేశ్యం టేబుల్ కంటెంట్‌కు "ముందు" క్యాప్షన్‌ను ఉంచడం అయితే, top అడ్డంగా ఉండే రైటింగ్ మోడ్‌లకు పనిచేస్తుంది. కానీ vertical-rl మోడ్‌లో, బ్లాక్ ఫ్లో యొక్క "ప్రారంభం" కుడి వైపు ఉంటుంది, పైభాగంలో కాదు.
లెవెల్ 2 లాజికల్ పరిష్కారాన్ని అందిస్తుంది:
- caption-side: block-start; క్యాప్షన్‌ను బ్లాక్ ఫ్లో యొక్క ప్రారంభంలో ఉంచుతుంది.
- caption-side: block-end; క్యాప్షన్‌ను బ్లాక్ ఫ్లో యొక్క ముగింపులో ఉంచుతుంది.
`text-align`: ఒక పునాది లాజికల్ వాల్యూ
text-align కోసం start మరియు end విలువలు కొంతకాలంగా ఉన్నప్పటికీ, అవి లాజికల్ ప్రాపర్టీస్ తత్వశాస్త్రంలో ఒక ముఖ్య భాగం మరియు పునరుద్ఘాటించడం విలువైనవి. text-align: left; ఉపయోగించడం ఒక సాధారణ తప్పు, ఇది RTL భాషలలో తక్షణమే లేఅవుట్ సమస్యలను కలిగిస్తుంది. సరైన, ఆధునిక విధానం ఎల్లప్పుడూ ఉపయోగించడం:
- text-align: start; టెక్స్ట్‌ను ఇన్‌లైన్ దిశ యొక్క ప్రారంభానికి సమలేఖనం చేస్తుంది.
- text-align: end; టెక్స్ట్‌ను ఇన్‌లైన్ దిశ యొక్క ముగింపుకు సమలేఖనం చేస్తుంది.
లెవెల్ 2 యొక్క కిరీట ఆభరణం: లాజికల్ `border-radius`
బహుశా లెవెల్ 2 లో అత్యంత ముఖ్యమైన మరియు శక్తివంతమైన చేర్పు బార్డర్ రేడియస్‌లను లాజికల్‌గా నియంత్రించడానికి ప్రాపర్టీల సమితి. ఇంతకు ముందు, మీరు ఒక కార్డ్‌కు "పైభాగంలో" మాత్రమే గుండ్రని మూలలు ఉండాలని కోరుకుంటే, మీరు border-top-left-radius మరియు border-top-right-radius ఉపయోగించేవారు. ఇది నిలువు రైటింగ్ మోడ్‌లో పూర్తిగా విఫలమవుతుంది, ఇక్కడ "పై" మూలలు ఇప్పుడు start-start మరియు end-start మూలలు.
లెవెల్ 2 ఒక ఎలిమెంట్ యొక్క నాలుగు మూలలకు ఫ్లో-రిలేటివ్ మార్గంలో మ్యాప్ చేసే నాలుగు కొత్త లాంగ్‌హ్యాండ్ ప్రాపర్టీలను పరిచయం చేస్తుంది. నామకరణ సంప్రదాయం border-[block-edge]-[inline-edge]-radius.
- border-start-start-radius: బ్లాక్-ప్రారంభ మరియు ఇన్‌లైన్-ప్రారంభ వైపులు కలిసే మూల.
- border-start-end-radius: బ్లాక్-ప్రారంభ మరియు ఇన్‌లైన్-ముగింపు వైపులు కలిసే మూల.
- border-end-start-radius: బ్లాక్-ముగింపు మరియు ఇన్‌లైన్-ప్రారంభ వైపులు కలిసే మూల.
- border-end-end-radius: బ్లాక్-ముగింపు మరియు ఇన్‌లైన్-ముగింపు వైపులు కలిసే మూల.
ఇది మొదట ఊహించుకోవడానికి గమ్మత్తుగా ఉంటుంది, కాబట్టి వివిధ రైటింగ్ మోడ్‌ల కోసం దానిని మ్యాప్ చేద్దాం:
`writing-mode: horizontal-tb` (ఉదా., ఇంగ్లీష్) లో `border-radius` మ్యాపింగ్
- border-start-start-radius top-left-radiusకు మ్యాప్ అవుతుంది.
- border-start-end-radius top-right-radiusకు మ్యాప్ అవుతుంది.
- border-end-start-radius bottom-left-radiusకు మ్యాప్ అవుతుంది.
- border-end-end-radius bottom-right-radiusకు మ్యాప్ అవుతుంది.
`dir="rtl"` తో `writing-mode: horizontal-tb` (ఉదా., అరబిక్) లో `border-radius` మ్యాపింగ్
ఇక్కడ, ఇన్‌లైన్ దిశ తిప్పబడింది.
- border-start-start-radius top-right-radiusకు మ్యాప్ అవుతుంది. (బ్లాక్-ప్రారంభం పైభాగం, ఇన్‌లైన్-ప్రారంభం కుడి).
- border-start-end-radius top-left-radiusకు మ్యాప్ అవుతుంది.
- border-end-start-radius bottom-right-radiusకు మ్యాప్ అవుతుంది.
- border-end-end-radius bottom-left-radiusకు మ్యాప్ అవుతుంది.
`writing-mode: vertical-rl` (ఉదా., జపనీస్) లో `border-radius` మ్యాపింగ్
ఇక్కడ, రెండు యాక్సిస్‌లు తిప్పబడ్డాయి.
- border-start-start-radius top-right-radiusకు మ్యాప్ అవుతుంది. (బ్లాక్-ప్రారంభం కుడి, ఇన్‌లైన్-ప్రారంభం పైభాగం).
- border-start-end-radius bottom-right-radiusకు మ్యాప్ అవుతుంది.
- border-end-start-radius top-left-radiusకు మ్యాప్ అవుతుంది.
- border-end-end-radius bottom-left-radiusకు మ్యాప్ అవుతుంది.
ఈ కొత్త ప్రాపర్టీలను ఉపయోగించడం ద్వారా, మీరు భౌతిక స్క్రీన్‌కు కాకుండా, కంటెంట్ ప్రవాహానికి అర్థవంతంగా ముడిపడి ఉన్న మూల రేడియస్‌లను నిర్వచించవచ్చు. ఒక "start-start" మూల ఎల్లప్పుడూ సరైన మూలగా ఉంటుంది, భాష లేదా టెక్స్ట్ దిశతో సంబంధం లేకుండా.
ఆచరణాత్మక అమలు: గ్లోబల్-రెడీ కాంపోనెంట్ నిర్మించడం
సిద్ధాంతం గొప్పది, కానీ ఇది ఆచరణలో ఎలా పనిచేస్తుందో చూద్దాం. మనం ఒక సాధారణ ప్రొఫైల్ కార్డ్ కాంపోనెంట్‌ను నిర్మిస్తాము, మొదట పాత భౌతిక ప్రాపర్టీలను ఉపయోగించి, ఆపై లెవెల్ 1 మరియు లెవెల్ 2 నుండి ఆధునిక లాజికల్ ప్రాపర్టీలను ఉపయోగించడానికి దానిని రీఫ్యాక్టర్ చేస్తాము.
కార్డ్‌కు ఒక వైపు ఫ్లోట్ చేయబడిన చిత్రం, ఒక శీర్షిక, కొంత టెక్స్ట్, మరియు ఒక అలంకార బార్డర్ మరియు గుండ్రని మూలలు ఉంటాయి.
"పాత" మార్గం: ఒక పెళుసైన, భౌతిక-ప్రాపర్టీ కార్డ్
కొన్ని సంవత్సరాల క్రితం మనం ఈ కార్డ్‌ను ఎలా స్టైల్ చేసి ఉండవచ్చో ఇక్కడ ఉంది:
/* --- CSS (భౌతిక ప్రాపర్టీలు) --- */
.physical-card {
width: 300px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-left: 5px solid steelblue;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.physical-card .avatar {
float: left;
width: 80px;
height: 80px;
margin-right: 15px;
}
.physical-card h3 {
margin-top: 0;
text-align: left;
}
ఒక ప్రామాణిక ఇంగ్లీష్ LTR సందర్భంలో, ఇది బాగానే కనిపిస్తుంది. కానీ మనం దీనిని dir="rtl" లేదా writing-mode: vertical-rl ఉన్న కంటైనర్‌లో ఉంచితే, లేఅవుట్ విఫలమవుతుంది. అలంకార బార్డర్ తప్పు వైపు ఉంది, అవతార్ తప్పు వైపు ఉంది, మార్జిన్ తప్పుగా ఉంది, మరియు గుండ్రని మూలలు తప్పుగా ఉంచబడ్డాయి.
"కొత్త" మార్గం: ఒక దృఢమైన, లాజికల్-ప్రాపర్టీ కార్డ్
ఇప్పుడు, లాజికల్ ప్రాపర్టీలను ఉపయోగించి అదే కాంపోనెంట్‌ను రీఫ్యాక్టర్ చేద్దాం. మనం లెవెల్ 1 మరియు లెవెల్ 2 నుండి కొత్త చేర్పుల నుండి ప్రాపర్టీలను ఉపయోగిస్తాము.
/* --- CSS (లాజికల్ ప్రాపర్టీలు) --- */
.logical-card {
inline-size: 300px;
padding: 20px; /* `padding` షార్ట్‌హ్యాండ్ ఇప్పటికే లాజికల్! */
margin-block-end: 20px;
border: 1px solid #ccc;
border-inline-start: 5px solid darkcyan;
border-start-start-radius: 8px; /* లెవెల్ 2 పవర్! */
border-end-start-radius: 8px; /* లెవెల్ 2 పవర్! */
}
.logical-card .avatar {
float: inline-start; /* లెవెల్ 2 పవర్! */
inline-size: 80px;
block-size: 80px;
margin-inline-end: 15px;
}
.logical-card h3 {
margin-block-start: 0;
text-align: start;
}
పరీక్ష మరియు ధృవీకరణ
ఈ కొత్త CSS తో, మీరు కాంపోనెంట్‌ను ఏదైనా కంటైనర్‌లో ఉంచవచ్చు, మరియు అది స్వయంచాలకంగా అనుగుణంగా ఉంటుంది.
- ఒక LTR సందర్భంలో: ఇది అసలు భౌతిక వెర్షన్‌కు సమానంగా కనిపిస్తుంది.
- ఒక RTL సందర్భంలో (dir="rtl"): అవతార్ కుడి వైపు ఫ్లోట్ అవుతుంది, దాని మార్జిన్ ఎడమ వైపు ఉంటుంది, అలంకార బార్డర్ కుడి వైపు ఉంటుంది, మరియు టెక్స్ట్ ప్రారంభానికి సమలేఖనం చేయబడుతుంది (కుడి వైపు). గుండ్రని మూలలు సరిగ్గా పై-కుడి మరియు దిగువ-కుడి వైపు ఉంటాయి. ఇది కేవలం పనిచేస్తుంది.
- ఒక నిలువు సందర్భంలో (writing-mode: vertical-rl): కార్డ్ యొక్క "వెడల్పు" (ఇప్పుడు దాని నిలువు inline-size) 300px ఉంటుంది. అవతార్ "పైభాగం" (inline-start) కు దాని "దిగువ" (inline-end) వైపు మార్జిన్‌తో ఫ్లోట్ అవుతుంది. అలంకార బార్డర్ కుడి వైపు (inline-start) ఉంటుంది, మరియు గుండ్రని మూలలు పై-కుడి మరియు పై-ఎడమ వైపు ఉంటాయి. కాంపోనెంట్ మీడియా క్వెరీలు లేదా ఓవర్‌రైడ్‌లు లేకుండా పూర్తిగా తనను తాను సరిగ్గా పునః-ఓరియంట్ చేసుకుంది.
బ్రౌజర్ మద్దతు మరియు ఫాల్‌బ్యాక్‌లు
ఇదంతా అద్భుతంగా అనిపిస్తుంది, కానీ బ్రౌజర్ మద్దతు గురించి ఏమిటి? శుభవార్త ఏమిటంటే లెవెల్ 1 లాజికల్ ప్రాపర్టీలకు మద్దతు అన్ని ఆధునిక బ్రౌజర్‌లలో అద్భుతంగా ఉంది. మీరు ఈరోజే margin-inline-start మరియు padding-block వంటి ప్రాపర్టీలను ఉపయోగించవచ్చు మరియు ఉపయోగించాలి.
కొత్త లెవెల్ 2 ఫీచర్‌లకు మద్దతు వేగంగా మెరుగుపడుతోంది కానీ ఇంకా సార్వత్రికం కాదు. float, clear, మరియు resize కోసం లాజికల్ విలువలు బాగా మద్దతు ఇవ్వబడ్డాయి. లాజికల్ border-radius ప్రాపర్టీలు సరికొత్తవి మరియు ఇప్పటికీ ఫీచర్ ఫ్లాగ్‌ల వెనుక లేదా ఇటీవలి బ్రౌజర్ వెర్షన్‌లలో ఉండవచ్చు. ఎప్పటిలాగే, మీరు అత్యంత తాజా అనుకూలత డేటా కోసం MDN వెబ్ డాక్స్ లేదా CanIUse.com వంటి వనరులను సంప్రదించాలి.
ప్రోగ్రెసివ్ ఎన్‌హాన్స్‌మెంట్ కోసం వ్యూహాలు
CSS స్థితిస్థాపకంగా రూపొందించబడినందున, మనం పాత బ్రౌజర్‌ల కోసం సులభంగా ఫాల్‌బ్యాక్‌లను అందించవచ్చు. ఒక బ్రౌజర్ లాజికల్ ప్రాపర్టీని అర్థం చేసుకోకపోతే, అది దానిని విస్మరించి, దాని ముందు నిర్వచించబడిన భౌతిక ప్రాపర్టీని ఉపయోగిస్తుందని క్యాస్కేడ్ నిర్ధారిస్తుంది.
మీరు ఫాల్‌బ్యాక్-రెడీ CSS ను ఎలా వ్రాయవచ్చో ఇక్కడ ఉంది:
.card {
/* పాత బ్రౌజర్‌ల కోసం ఫాల్‌బ్యాక్ */
border-left: 5px solid darkcyan;
border-top-left-radius: 8px;
/* ఫాల్‌బ్యాక్‌ను ఓవర్‌రైడ్ చేసే ఆధునిక లాజికల్ ప్రాపర్టీ */
border-inline-start: 5px solid darkcyan;
border-start-start-radius: 8px;
}
ఈ విధానం ప్రతిఒక్కరికీ ఒక దృఢమైన బేస్‌లైన్ అనుభవాన్ని నిర్ధారిస్తుంది, అదే సమయంలో ఆధునిక బ్రౌజర్‌లలోని వినియోగదారులకు మెరుగైన, అనుకూల లేఅవుట్‌ను అందిస్తుంది. బహుళ రైటింగ్ మోడ్‌లకు మద్దతు ఇవ్వనవసరం లేని ప్రాజెక్ట్‌లకు, ఇది అతిగా ఉండవచ్చు. కానీ ఏదైనా గ్లోబల్ అప్లికేషన్, డిజైన్ సిస్టమ్, లేదా థీమ్ కోసం, ఇది ఒక దృఢమైన మరియు భవిష్యత్-ప్రూఫ్ వ్యూహం.
భవిష్యత్తు లాజికల్: లెవెల్ 2 దాటి
భౌతిక నుండి లాజికల్ మనస్తత్వానికి పరివర్తన ఆధునిక CSS లో అత్యంత ముఖ్యమైన మార్పులలో ఒకటి. ఇది మన స్టైలింగ్ భాషను విభిన్న, గ్లోబల్ వెబ్ యొక్క వాస్తవికతతో సమలేఖనం చేస్తుంది. ఇది మనల్ని పెళుసైన, స్క్రీన్-ఓరియెంటెడ్ హ్యాక్స్ నుండి స్థితిస్థాపక, కంటెంట్-ఓరియెంటెడ్ డిజైన్ వైపు నడిపిస్తుంది.
ఇప్పటికీ ఖాళీలు ఉన్నాయా? కొన్ని. background-position లేదా గ్రేడియంట్స్ వంటి ప్రాపర్టీల కోసం లాజికల్ విలువలు ఇప్పటికీ చర్చించబడుతున్నాయి. కానీ లెవెల్ 2 విడుదలతో, రోజువారీ లేఅవుట్ మరియు స్టైలింగ్ పనులలో అధిక భాగం ఇప్పుడు పూర్తిగా లాజికల్ విధానాన్ని ఉపయోగించి సాధించవచ్చు.
డెవలపర్‌ల కోసం చర్యకు పిలుపు స్పష్టంగా ఉంది: డిఫాల్ట్‌గా లాజికల్ ప్రాపర్టీలను ఉపయోగించడం ప్రారంభించండి. width కు బదులుగా inline-size ను మీ గో-టుగా చేసుకోండి. ఎడమ మరియు కుడి మార్జిన్‌లను విడిగా సెట్ చేయడానికి బదులుగా margin-inline ఉపయోగించండి. ఇది కేవలం వివిధ భాషలకు మద్దతు ఇవ్వడం గురించి కాదు; ఇది మెరుగైన, మరింత స్థితిస్థాపక CSS వ్రాయడం గురించి. లాజికల్ ప్రాపర్టీలతో నిర్మించిన ఒక కాంపోనెంట్ LTR, RTL, లేదా నిలువు లేఅవుట్‌లో ఉపయోగించబడినా, సహజంగానే మరింత పునర్వినియోగించదగినది మరియు అనుకూలమైనది. ఇది కేవలం మెరుగైన ఇంజనీరింగ్.
ముగింపు: ప్రవాహాన్ని స్వీకరించండి
CSS లాజికల్ ప్రాపర్టీస్ లెవెల్ 2 కేవలం కొత్త ఫీచర్ల సమాహారం కాదు; ఇది ఒక దృష్టి యొక్క పూర్తి. ఇది వారి కంటెంట్ యొక్క సహజ ప్రవాహాన్ని గౌరవించే లేఅవుట్‌లను నిర్మించడానికి అవసరమైన చివరి, కీలకమైన ముక్కలను అందిస్తుంది, ఆ ప్రవాహం ఏదైనా కావచ్చు. float: inline-start మరియు border-start-start-radius వంటి ప్రాపర్టీలను స్వీకరించడం ద్వారా, మనం మన నైపుణ్యాన్ని కేవలం ఒక స్క్రీన్‌పై పెట్టెలను ఉంచడం నుండి నిజంగా గ్లోబల్, కలుపుకొనిపోయే, మరియు భవిష్యత్-ప్రూఫ్ వెబ్ అనుభవాలను రూపొందించడం వరకు ఉన్నత స్థాయికి తీసుకువెళతాము.
తదుపరిసారి మీరు ఒక కొత్త ప్రాజెక్ట్‌ను ప్రారంభించినప్పుడు లేదా ఒక కొత్త కాంపోనెంట్‌ను నిర్మించినప్పుడు, మీరు margin-left టైప్ చేయడానికి ముందు ఆగండి. మిమ్మల్ని మీరు ప్రశ్నించుకోండి, "నా ఉద్దేశ్యం ఎడమ వైపునా, లేక ప్రారంభం వైపునా?" ఆ చిన్న మానసిక మార్పు చేయడం ద్వారా, మీరు ప్రతిచోటా, ప్రతిఒక్కరికీ మరింత అనుకూలమైన మరియు అందుబాటులో ఉండే వెబ్‌కు దోహదపడతారు.